<template>
    <div>
        <slot name="header"></slot>
        <el-carousel height="300px" style="border-radius: 15px;" :autoplay="autoplay" :interval="interval" trigger="click">
            <el-carousel-item v-for="item in swiperList" :key="item.goods_id">
                <img v-error="item.image_src" alt="" class="img">
            </el-carousel-item>
        </el-carousel>
        <slot name="footer"></slot>
    </div>
</template>

<script setup>
import { defineProps, ref } from 'vue'
const { api, autoplay, interval } = defineProps({
    api: {
        type: Function,
    },
    autoplay: {
        type: Boolean,
        default: true
    },
    interval: {
        type: Number,
        default: 3000
    }
})
const data = ref([])
const swiperList = ref()

data.value = await api()
swiperList.value = data.value.data.data
// console.log(data.value)
</script>

<style scoped>
.el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
    text-align: center;
}

.img {
    width: 100%;
    height: 100%;
    border-radius: 15px;
}
</style>